<template>
	<view class="page_full">
		<view class="page_top">
			<image src="@/static/logo/back_icon.png" mode="" class="back_logo"
			@click="back"></image>
			<text>创建历史</text>
			<image src="@/static/logo/add_icon.png" mode="" class="img_logo"
			@click="addOrder"></image>
		</view>
		<scroll-view scroll-y="true" class="page_scroll_box" 
		:refresher-enabled ="true" :refresher-triggered="scrollData.triggered"
		@scrolltolower="addMore" @refresherrefresh="regetList(true)">
			<view class="page_scroll_content">
				<view class="order_cell" v-for="item in workList" :key="item.id" @click="orderClick(item)">
					<view class="order_top">
						<view class="order_text">
							<text>{{ item.title }}</text>
						</view>
						<view class="order_status_box" :style="`--status-color:${(dictMap[item.status]||{}).color};`">
							<text class="order_status">{{ (dictMap[item.status]||{}).label }}</text>
						</view>
					</view>
				</view>
				
				
				<view class="empty_box" v-if="workList.length < 1">
					<u-empty mode="data" text="暂无事件">
					</u-empty>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { onLoad, onShow } from "@dcloudio/uni-app"
	import { ref, reactive, toRefs } from 'vue'
	
	import { getHistoryWorkListAPI } from '@/api/initiate.js'
	
	const data = reactive({
		workList: [],
		queryParamse:{
			pageSize: 10,
			pageNum: 1,
		}
	})
	let { workList, queryParamse } = toRefs(data)
	const scrollData = reactive({
		triggered: false
	})
	
	const dictMap = {
		"1": { label:"已发布", color: "#39D3F9" },
		"2": { label:"待分配", color: "#FCDD2F" },
		"3": { label:"待接收", color: "#FCDD2F" },
		"4": { label:"处理中", color: "#39D3F9" },
		"5": { label:"处理完成", color: "#5DE035" },
	}
	
	
	async function getHistoryWorkListFn() {
		const res = await getHistoryWorkListAPI(queryParamse.value)
		scrollData.triggered = false
		console.log("获取到的列表", res)
		if(res.code != 200) return;
		workList.value = [...workList.value, ...res.rows]
	}
	
	function addMore() {
		queryParamse.value.pageNum++
		getHistoryWorkListFn()
	}
	
	function regetList(triggered = true) {
		scrollData.triggered = triggered
		queryParamse.value.pageNum = 1
		workList.value = []
		getHistoryWorkListFn()
	}
	
	function addOrder() {
		uni.navigateTo({
			url:"/pages/addOrder/addOrder"
		})
	}
	
	function orderClick(item) {
		console.log("status",item)
		if(item.status == '5') {
			uni.navigateTo({
				url:`/pages/handleOrder/handleOrder?id=${item.id}&status=${item.status}`,
				events:{
					reset : function(data) {
						console.log(data)
					}
				}
			})
			
		} else {
			uni.navigateTo({
				url:`/pages/addOrder/addOrder?id=${item.id}&status=${item.status}&type=initiate`,
				events:{
					reset : function(data) {
						console.log(data)
					}
				}
			})
		}

	}
	
	function back() {
		uni.navigateBack(-1)
	}
	
	onLoad(()=>{
		getHistoryWorkListFn()
	})
	
	onShow(()=>{
		if(uni.getStorageSync("reget")) {
			regetList(false)
			uni.removeStorageSync("reget")
		}
	})
	
</script>

<style scoped lang="scss">
	.page_top {
		width: 100%;
		height: calc(var(--status-bar-height) + 88rpx);
		padding-top: var(--status-bar-height);
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F8F8F8;
		position: relative;
		.img_logo {
			--img-size: 40rpx;
			width: var(--img-size);
			height: var(--img-size);
			position: absolute;
			top: calc(50% + var(--status-bar-height));
			right: 32rpx;
			transform: translateY(-50%);
		}
		.back_logo {
			--img-size: 32rpx;
			width: var(--img-size);
			height: var(--img-size);
			position: absolute;
			top: calc(50% + var(--status-bar-height));
			left: 30rpx;
			transform: translateY(-50%);
		}
	}
	.page_scroll_box {
		width: 100%;
		height: calc(100% - var(--status-bar-height) - 88rpx);
		.page_scroll_content {
			min-height: 100%;
			padding: 30rpx;
		}
	}
	
	.order_cell {
		background-color: #f8f8f8;
		padding: 16rpx;
		border-radius: 4rpx;
		margin-bottom: 16rpx;
		.order_top {
			display: flex;
			align-items: center;
			padding: 16rpx 0;
			.order_text {
				flex: 1;
				margin-right: 24rpx;
				font-size: 30rpx;
			}
			.order_status_box {
				width: 110rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
			.order_status {
				position: relative;
				font-size: 24rpx;
				display: block;
				width: max-content;
			}
			.order_status::before{
				content: "";
				display: block;
				width: 16rpx;
				height: 16rpx;
				background-color: var(--status-color);
				border-radius: 50%;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translate(-150%, -49%);
			}
		}
	}

	.empty_box {
		margin-top: 20vh;
	}
</style>
